<template>
     <div class="main-left"> 
              <div class="main-item">
                <ul>
                    <li>
                        <div class="music_title">在线音乐</div>                 
                             <ul class="main_left_subnav">
                                 <li>
                                      <a href="#">
                                        <i class="iconfont  icon-yinle"></i>                                      
                                        <span>推荐</span>
                                      </a>
                                 </li> 
                                 <li>
                                      <a href="#">
                                        <i class="iconfont icon-shipin-copy-copy"></i>
                                        <span>视频</span>
                                      </a>
                                </li>
                                <li>
                                     <a href="#">
                                       <i class="iconfont icon-diantai-copy "></i>
                                       <span>电台</span>
                                     </a>
                                </li>                           
                            </ul>
                    </li>
                    
                    <li>
                        <div class="music_title">我的音乐</div>                 
                             <ul class="main_left_subnav">
                                 <li>
                                      <a href="#">
                                        <i class="iconfont icon-icowodeshoucang-copy"></i>
                                        <span>我喜欢</span>
                                      </a>
                                 </li> 
                                 <li>
                                      <a href="#">
                                        <i class="iconfont icon-yinle-xiazai-copy"></i>
                                        <span>本地歌曲</span>
                                      </a>
                                </li>
                                <li>
                                     <a href="#">
                                       <i class="iconfont  icon-bendi-zuijinbofang-copy "></i>
                                       <span>最近播放</span>
                                     </a>
                                </li>                           
                            </ul>
                    </li>
                    <li>
                         <div class="music_title">自建歌单</div>                 
                             <ul class="main_left_subnav">
                                 <li>
                                      <a href="#">
                                        <i class="iconfont icon-morenshoucang-copy "></i>
                                        <span>默认收藏</span>
                                      </a>
                                 </li> 
                                 <!-- <li>
                                      <a href="#">
                                        <i class="iconfont icon-wodeshoucang"></i>
                                        <span>我喜欢</span>
                                      </a>
                                </li>                                                        -->
                            </ul>
                    </li>
                </ul>
              </div>
            </div> 
</template>


<style lang="less" scoped>
.main-item{
    position: fixed; 
    top:0;
    bottom: 0;
    width: 220px;
    background-color: #f0f0f0; 
}
.music_title{
    padding: 15px 20px;
    color: #777;

}
.main_left_subnav li{
  display: flex;
    align-items: center;
   line-height: 40px;
}

.main_left_subnav li  a{
    display: block;
    align-content: center;
     padding-left: 30px;
    font-size:  16px;
    
}
.main_left_subnav li i{
    padding-right: 10px;
    font-size: px;
}
.main_left_subnav li  a:hover{
    background-color:#ec4141;
    color: #fff;
    border-radius: 10px;
    width: 80%;
}
</style>